<template>
  <Transition name="fade">
    <div v-if="show" class="preview-container" @click="handleClose">
      <div class="preview-content" @click.stop>
        <div
          class="image-wrapper"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <img 
            :src="currentImage.url" 
            :alt="currentImage.name"
            :style="imageStyle"
            ref="previewImg"
            @wheel="handleZoom"
            @mousedown="startDrag"
            @mousemove="onDrag"
            @mouseup="stopDrag"
            @mouseleave="stopDrag"
          >
        </div>
        <div class="controls">
          <button class="control-button" @click="showPrevious" title="上一张">
            <ChevronLeftIcon class="control-icon" />
          </button>
          <button class="control-button" @click="zoomIn" title="放大">
            <PlusIcon class="control-icon" />
          </button>
          <button class="control-button" @click="zoomOut" title="缩小">
            <MinusIcon class="control-icon" />
          </button>
          <button class="control-button" @click="rotateImage" title="旋转">
            <ArrowPathIcon class="control-icon" />
          </button>
          <button class="control-button" @click="showNext" title="下一张">
            <ChevronRightIcon class="control-icon" />
          </button>
          <button class="control-button" @click="showDeleteModal = true" title="删除">
            <TrashIcon class="control-icon" />
          </button>
          <button class="control-button" @click="handleClose" title="关闭">
            <XMarkIcon class="control-icon" />
          </button>
        </div>
      </div>
    </div>
  </Transition>

  <!-- 删除确认对话框 -->
  <Transition name="fade">
    <div v-if="showDeleteModal" class="delete-modal">
      <div class="delete-modal-content">
        <p>确定要删除这张图片吗？</p>
        <div class="delete-modal-buttons">
          <button class="delete-modal-button confirm" @click="confirmDelete">确定</button>
          <button class="delete-modal-button cancel" @click="cancelDelete">取消</button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { 
  XMarkIcon, 
  PlusIcon, 
  MinusIcon,
  ArrowPathIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  TrashIcon
} from '@heroicons/vue/24/outline'

const props = defineProps({
  show: Boolean,
  images: Array, // 接收所有图片
  currentIndex: Number // 当前图片的索引
})

const emit = defineEmits(['close', 'change-index', 'delete-image'])
const scale = ref(1)
const position = ref({ x: 0, y: 0 })
const isDragging = ref(false)
const dragStart = ref({ x: 0, y: 0 })
const rotation = ref(0)
const touchStartX = ref(0)
const touchEndX = ref(0)
const showDeleteModal = ref(false) // 是否显示删除确认对话框

const currentImage = computed(() => props.images[props.currentIndex])

const imageStyle = computed(() => ({
  transform: `translate(${position.value.x}px, ${position.value.y}px) scale(${scale.value}) rotate(${rotation.value}deg)`,
  cursor: isDragging.value ? 'grabbing' : 'grab'
}))

const handleClose = () => {
  resetZoom()
  emit('close')
}

const zoomIn = () => {
  scale.value = Math.min(scale.value + 0.25, 3)
}

const zoomOut = () => {
  scale.value = Math.max(scale.value - 0.25, 0.5)
}

const resetZoom = () => {
  scale.value = 1
  position.value = { x: 0, y: 0 }
  rotation.value = 0
}

const handleZoom = (e) => {
  e.preventDefault()
  if (e.deltaY < 0) {
    zoomIn()
  } else {
    zoomOut()
  }
}

const startDrag = (e) => {
  isDragging.value = true
  dragStart.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y
  }
}

const onDrag = (e) => {
  if (isDragging.value) {
    position.value = {
      x: e.clientX - dragStart.value.x,
      y: e.clientY - dragStart.value.y
    }
  }
}

const stopDrag = () => {
  isDragging.value = false
}

const rotateImage = () => {
  rotation.value = (rotation.value + 90) % 360
}

// 显示下一张图片
const showNext = () => {
  const nextIndex = (props.currentIndex + 1) % props.images.length
  emit('change-index', nextIndex)
  resetZoom()
}

// 显示上一张图片
const showPrevious = () => {
  const prevIndex = (props.currentIndex - 1 + props.images.length) % props.images.length
  emit('change-index', prevIndex)
  resetZoom()
}

// 处理触摸开始事件
const handleTouchStart = (e) => {
  touchStartX.value = e.touches[0].clientX
}

// 处理触摸移动事件
const handleTouchMove = (e) => {
  touchEndX.value = e.touches[0].clientX
}

// 处理触摸结束事件
const handleTouchEnd = () => {
  const deltaX = touchEndX.value - touchStartX.value
  if (Math.abs(deltaX) > 50) { // 滑动距离大于50px才切换
    if (deltaX > 0) {
      showPrevious()
    } else {
      showNext()
    }
  }
}

// 确认删除
const confirmDelete = () => {
  emit('delete-image', props.currentIndex)
  showDeleteModal.value = false
}

// 取消删除
const cancelDelete = () => {
  showDeleteModal.value = false
}
</script>

<style scoped>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  transition: transform 0.1s ease;
  user-select: none;
}

.controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.control-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.control-icon {
  width: 20px;
  height: 20px;
  color: white;
}

/* 删除确认对话框样式 */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.delete-modal-content {
  background: var(--background-color);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 90%;
  width: 300px;
}

.delete-modal-content p {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-primary);
}

.delete-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.delete-modal-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-modal-button.confirm {
  background: var(--primary-color);
  color: white;
}

.delete-modal-button.confirm:hover {
  background: var(--secondary-color);
}

.delete-modal-button.cancel {
  background: var(--surface-color);
  color: var(--text-primary);
}

.delete-modal-button.cancel:hover {
  background: var(--border-color);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 